<template>
	<view>
		<mescroll-body ref="mescrollRef" top="40" @init="mescrollInit" @down="downCallback" :down="downOption" :up="upOption"
		 class="container">
			<view class="top-header">
				<view class="head-left">
					<view class="usrname">{{userinfo.nickname}}</view>
					<view class="pagetitle">个人中心</view>
				</view>
				<view class="head-right" :style="{'background-image':'url(/static/image/member_'+userinfo.level+'.png)'}">
					<image :src="userinfo.avatar?userinfo.avatar:'/static/image/davatar.png'"></image>
				</view>
			</view>
			<view class="cardbag">
				<view class="cardbag-title">
					<view class="selfbag"> </view>
					<view class="homepage" @click="gotohomepage" v-if="memberinit.brand">
						<image src="/static/image/authicon.png" mode="aspectFill"></image>
						<text style="margin: 0 5rpx;">品牌主页</text>
						<text style="font-size: 35rpx;">›</text>
					</view>
				</view>
				<view class="cardbag-center">
					<!--现金-->
					<view class="box">
						<view class="title">我的现金</view>
						<view class="num">{{userinfo.money}}</view>
						<view class="button" @click="goto_cash">提现</view>
					</view>
					<!--金币-->
					<view class="box">
						<view class="title">我的金币</view>
						<view class="num">{{userinfo.integral}}</view>

						<view class="button" @click="goto_cash('exchange')">兑换</view>
					</view>
				</view>
				<!--抽奖参与记录{{memberinit.partIn}}-->
				<view class="cardbag-dreaw">
					<navigator url="/pages/lottery/partakelist" class="record">
						<view class="num">{{memberinit.partIn}}</view>
						<view class="title">抽奖记录</view>
						<view class="count-dreaw" v-if="memberinit.noCheck>0">
							{{memberinit.noCheck}}
						</view>
					</navigator>
					<!-- <view class="line"></view> -->
					<navigator url="/pages/lottery/winlist" class="record">
						<view class="num">{{memberinit.lottery}}</view>
						<view class="title">中奖记录</view>
					</navigator>
					<!-- <view class="line" style="left: 450rpx;"></view> -->
					<navigator url="/pages/lottery/drawlist" class="record">
						<view class="num">{{memberinit.sponsor}}</view>
						<view class="title">发起抽奖</view>
					</navigator>
					<!-- <view class="line" style="left: 450rpx;"></view> -->
					<navigator url="/pages/task/selfjoin" class="record">
						<view class="num">666</view>
						<view class="title">任务记录</view>
					</navigator>
				</view>
			</view>

			<!--快速导航-->
			<view class="tabbar">
				<view class="tabbar-item" @click='gotopage("/pages/message/message")'>
					<view class="item1">
						<view class="iconfont">&#xe7b1;</view>
						<text>消息通知</text>
					</view>
					<view class="item2">
						<view class="count-message" v-if="message_number>0">{{message_number}}</view>
						<text class="jiantou">›</text>
					</view>
				</view>

				<view class="tabbar-item" @click='gotopage("/pages/member/coupon")'>
					<view class="item1">
						<view class="iconfont">&#xe7b6;</view>
						<text>我的奖品</text>
					</view>
					<view class="item2">
						<text class="cashquan">现金红包劵</text>
						<image src="../../static/image/i_coupon1.png"></image>
						<text class="jiantou">›</text>
					</view>
				</view>
				<view class="tabbar-item" @click='gotopage("/pages/member/order")'>
					<view class="item1">
						<view class="iconfont">&#xe612;</view>
						<text>我的订单</text>
					</view>
					<view class="item2">
						<text class="jiantou">›</text>
					</view>
				</view>

				<view @click="sharequn" class="tabbar-item">
					<view class="item1">
						<view class="iconfont">&#xe6ea;</view>
						<text>好友分享</text>
					</view>
					<view class="item2">
						<text class="jiantou">›</text>
					</view>
				</view>

				<view class="tabbar-item" @click='gotopage("/pages/address/addresslist")'>
					<view class="item1">
						<view class="iconfont">&#xe62c;</view>
						<text>收货地址</text>
					</view>
					<view class="item2">
						<text class="jiantou">›</text>
					</view>
				</view>

				<view class="tabbar-item" @click='gotopage("/pages/release/promoter?type=hidden")'>
					<view class="item1">
						<view class="iconfont">&#xe640;</view>
						<text>发起人管理</text>
					</view>
					<view class="item2">
						<text class="jiantou">›</text>
					</view>
				</view>

				<view class="tabbar-item" @click='gotopage("/pages/setinfo/accoutmanager")'>
					<view class="item1">
						<view class="iconfont">&#xe604;</view>
						<text>账号管理</text>
					</view>
					<view class="item2">
						<text class="jiantou">›</text>
					</view>
				</view>

				<view class="tabbar-item" @click='gotopage("/pages/member/problem")'>
					<view class="item1">
						<view class="iconfont">&#xe605;</view>
						<text>常见问题</text>
					</view>
					<view class="item2">
						<text class="jiantou">›</text>
					</view>
				</view>

				<view class="tabbar-item" @click='gotopage("/pages/setinfo/setinfo")'>
					<view class="item1">
						<view class="iconfont">&#xe62d;</view>
						<text>设置中心</text>
					</view>
					<view class="item2">
						<text class="jiantou">›</text>
					</view>
				</view>

				<view class="tabbar-item" style="border: none;" @click='gotopage("/pages/webview/webview?url=http://recharge.607068.com/rg-static/extension.html")'>
					<view class="item1">
						<view class="iconfont">&#xe611;</view>
						<text>商务合作</text>
					</view>
					<view class="item2">
						<text class="jiantou">›</text>
					</view>
				</view>
			</view>
			<!--建议-->
			<complaint></complaint>
		</mescroll-body>

		<alert :modeltitle="modeltitle" :visible="visible">
			<view class="contactus">
				<view class="coop-text">
					<view>1.上首页请备注『我要上首页』</view>
					<view>2.其他合作请注明『具体合作事项』</view>
					<view>3.商务微信：{{wechat}}</view>
					<view class="zhuyi">注：服务时间(10:00-21:00)</view>
				</view>
				<view class="coop-button">
					<view class="cancel" @tap="visible=false">取消</view>
					<view class="copywechat" @click="copywechats">一键复制微信号</view>
				</view>
			</view>
		</alert>

		<globallogin :globalislogin="globalislogin"></globallogin>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				promotion: false, //是否进入推广页面
				globalislogin: false,
				visible: false,
				modeltitle: '联系商务',
				userinfo: this.$Initdata,
				wechat: "wx8888",
				triggered: false,
				memberinit: {
					partIn: 0,
					lottery: 0,
					sponsor: 0
				}, //初始话数据
				//下拉参数配置
				downOption: {
					textColor: "#fff",
					auto: true, //是否在初始化后,自动执行downCallback; 默认true
					// bgColor: "#378aff",
					textLoading: '玩命加载中...',
					// outOffsetRate:0.1,
					autoShowLoading: true, //自动执行一次下来  
				},
				//上拉参数配置
				upOption: {
					use: false
				},
				levelcolor: [
					'#87ccfd',
					'#9aafc5',
					'#e7b542',
					'#3f95be'
				],
				leveltext: ['普通', '白银', '黄金', '钻石']

			}
		},


		onLoad() {
			//全局订阅事件（多次)
			uni.$on("closewindown", (option) => {
				//关闭alret提示框
				this.visible = option;
			})
		},
		computed: {
			message_number() {
				return this.$common.state.messagecount
			}
		},
		methods: {
			//跳转指定页面
			gotopage(url) {
				uni.navigateTo({
					url: url
				})
			},

			//分享朋友或群
			sharequn() {
				if (this.promotion) {
					uni.navigateTo({
						url: '/pages/bonus/bonus'
					})
					return
				}
				let _this = this
				_this.$HttRequest({
					url: '/promote/shareImg',
					param: ''
				}, 'GET', true).then((res) => {
					console.log(res)
					if (res.status === 10000) {
						// this.shareimg = res.data.imgUrl
						// this.shareinfo = res.data
						uni.share({
							provider: "weixin",
							scene: "WXSceneSession",
							type: 0,
							href: res.data.url,
							title: res.data.sTitle,
							summary: res.data.sDescribe,
							imageUrl: res.data.sImage,
							success: function(res) {
								_this.$ShowMsg('分享朋友朋友或群成功！')
							},
							fail: function(err) {
								console.log(err)
								_this.$ShowMsg('分享朋友失败！')
							}
						})
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error);
				})

			},

			//按钮操作
			goto_cash(type = null) {
				if (type === 'exchange') {
					uni.switchTab({
						url: '/pages/convert/convert'
					})
				} else {
					uni.navigateTo({
						url: '/pages/cash/recharge'
					})
				}
			},
			//获取用户信息
			getmember() {
				let user_info = uni.getStorageSync('user_info')
				this.userinfo = user_info ? user_info : this.$Initdata
				console.log(this.userinfo);
				//获取消息通知数量
				this.$HttRequest({
					url: '/message/list',
					param: ''
				}).then(res => {
					//console.log(res)
					if (res.data.length > 0) {
						//设置角标
						uni.showTabBarRedDot({
							index: 3
						})
						this.$common.state.messagecount = res.data.length
					}
				}).catch(error => {
					this.$ShowMsg('error::' + JSON.stringify(error))
					console.log(error)
				})
			},

			//下来刷新
			downCallback() {
				//查看是否登陆为true需要全屏遮罩
				//console.log(this.$Logintip(),uni.getStorageSync('dxzk_access_token')) 
				if (this.$Logintip()) {
					this.globalislogin = true
					this.mescroll.endSuccess();
					return
				}
				this.$HttRequest({
					url: '/member/lotteryCount',
					param: ''
				}).then((res) => {
					console.log(res)
					if (res.status === 10000) {
						this.memberinit = res.data;
						this.promotion = res.data.promotion
						this.getmember();
					} else {
						this.$ShowMsg(res.message)
					}
					this.mescroll.endSuccess();
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('网络连接失败！');
					this.mescroll.error();
				});
			},

			//去品牌主页
			gotohomepage() {
				uni.navigateTo({
					url: '/pages/brand/mainbrand?id=' + this.userinfo.id,
				})
			},
			copywechats() {
				uni.setClipboardData({
					data: '天天有礼',
					success() {
						console.log('success');
					}
				});
			}


		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
		background-image: url(../../static/image/meber-top.png);
		background-position: top left top;
		background-size: 100% 500rpx;
		background-repeat: no-repeat;
	}

	.cardbag {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background: rgba(#fff, 0.8);
		border-radius: 20rpx;
		width: 90%;
		margin: 0 auto;

		.cardbag-title {
			font-size: 28rpx;
			display: flex;
			width: 100%;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 20rpx;
			padding-top: 30rpx;

			.selfbag {
				font-size: 28rpx;
				font-weight: bold;
				margin-left: 40rpx;
				color: #212c68;
			}

			.homepage {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 25rpx;
				padding: 5rpx 20rpx;
				background-color: $uni-color-primary;
				color: #ecf6ff;
				border-top-left-radius: 30rpx;
				border-bottom-left-radius: 30rpx;

				image {
					width: 25rpx;
					height: 24rpx;
				}
			}
		}

		.cardbag-center {
			// margin: 20rpx 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 100%;

			.box {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				font-size: 28rpx;

				.num {
					color: #212c68;
					font-size: 40rpx;
					font-weight: bold;

					margin-bottom: 10rpx;
				}

				.title {
					color: #212c68;
					margin-top: 20rpx;
				}

				.button {
					margin-top: 10rpx;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 130rpx;
					height: 55rpx;
					background-color: $uni-color-primary;
					border-radius: 30rpx;
				}
			}
		}

		.cardbag-dreaw {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 100%;
			margin-bottom: 30rpx;
			margin-top: 45rpx;
			position: relative;

			.line {
				background-color: #e6e6e6;
				position: absolute;
				width: 1rpx;
				height: 60rpx;
				top: 10rpx;
				left: 225rpx;
			}

			.record {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				font-size: 28rpx;
				position: relative;

				.count-dreaw {
					position: absolute;
					top: -20rpx;
					right: -48rpx;
					padding: 10rpx;
					background-color: #FF0000;
					border-radius: 50%;
					color: #fff;
					font-size: 22rpx;
					width: 22rpx;
					height: 22rpx;
					display: flex;
					justify-content: center;
					align-items: center;

				}

				.num {
					font-weight: bold;
					color: #212c68;
				}

				.title {
					color: #aaa;
				}
			}
		}
	}

	.top-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 90%;
		margin: 0 auto;
		margin-top: 30rpx;

		// background-color: $uni-color-primary;
		// height: 500rpx;
		.head-left {
			color: #fff;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: flex-start;

			.usrname {
				font-size: 30rpx;
				margin-bottom: 20rpx;
			}

			.pagetitle {
				font-weight: bold;
				font-size: 55rpx;

			}
		}

		.head-right {
			display: flex;
			justify-content: center;
			align-items: center;
			background-repeat: no-repeat;
			background-position: center;
			background-size: 180rpx 200rpx;
			width: 180rpx;
			height: 200rpx;

			image {
				// box-shadow: 0 5rpx 15rpx #e6e6e6;
				border: 1rpx #fff solid;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;

			}
		}
	}

	.contactus {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		flex: 1;

		.coop-text {
			flex: 1;

			view {
				margin: 20rpx 0;
			}

			.zhuyi {
				margin-top: 40rpx;
				color: #8b8b8b;
			}
		}

		.coop-button {
			width: 100%;
			display: flex;
			flex: 1;
			align-items: center;
			justify-content: space-around;
			margin: 20rpx 0;

			.cancel {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 170rpx;
				height: 75rpx;
				background-color: #e6e6e6;
				color: #808080;
				border-radius: 30rpx;
			}

			.copywechat {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 240rpx;
				height: 75rpx;
				background-color: $uni-color-primary;
				border-radius: 30rpx;
				color: #fff;
			}
		}

	}

	.jiantou {
		color: #cdcdcd;
		font-size: 35rpx;
	}


	.container {
		width: 100vw;
		display: flex;
		position: absolute;
		z-index: 99;
		top: 40rpx;

		.tabbar {
			margin: 0 auto;
			background-color: #fff;
			width: 90%;
			border-radius: 10rpx;
			margin-top: 20rpx;
			padding: 12rpx 0;

			.tabbar-item {
				padding: 22rpx 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 30rpx;
				color: #343434;
				border-bottom: 1rpx solid #f8f8f8;

				.item1 {
					display: flex;
					justify-content: center;
					align-items: center;

					.iconfont {
						font-size: 40rpx;
					}

					text {

						margin-left: 20rpx;
					}

				}

				.item2 {
					display: flex;
					justify-content: center;
					align-items: center;

					.count-message {
						width: 30rpx;
						height: 30rpx;
						background-color: #FF0000;
						border-radius: 50%;
						color: #fff;
						font-size: 22rpx;
						margin: 0 10rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.cashquan {
						font-size: 26rpx;
						color: #f87f0c;
					}

					image {
						width: 36rpx;
						height: 36rpx;
						margin: 0 10rpx;
						margin-right: 20rpx;
					}
				}
			}
		}

		.head {

			margin: 0 auto;
			margin-top: 60rpx;
			background-color: #fff;
			width: 90%;
			height: 350rpx;
			border-radius: 10rpx;

			.lotteryinfo {
				width: 80%;
				margin: 0 auto;
				display: flex;
				justify-content: space-around;
				align-items: center;
				height: 130rpx;

				.lottery-item {
					display: flex;
					justify-content: center;
					align-items: center;
					color: #b3b3b3;
					flex-direction: column;
					font-size: 25rpx;

					.bigfont {
						color: #000;
						font-size: 32rpx;
					}
				}
			}

			.wechatinfo {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				padding-bottom: 0;
				padding-top: 20rpx;

				.homepage {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 25rpx;
					padding: 10rpx 20rpx;
					background-color: #ecf6ff;
					color: $uni-color-primary;

					image {
						width: 25rpx;
						height: 24rpx;
					}
				}

				.userinfo {
					display: flex;
					justify-content: center;
					align-items: center;

					.leveltip {
						display: flex;
						justify-content: center;
						align-items: flex-start;
						font-size: 32rpx;
						flex-direction: column;
						width: 250rpx;

						.eli {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							width: 95%;
						}

						.level {

							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 20rpx;
							color: #fff;
							margin: 15rpx 10rpx;
							width: 120rpx;
							height: 40rpx;
							font-size: 22rpx;
						}
					}

					.userwechatimg {
						display: flex;
						justify-content: center;
						align-items: center;
						background-repeat: no-repeat;
						background-position: center;
						background-size: 180rpx 200rpx;
						width: 180rpx;
						height: 200rpx;

						image {
							box-shadow: 0 5rpx 15rpx #e6e6e6;
							border: 1rpx #fff solid;
							width: 120rpx;
							height: 120rpx;
							border-radius: 50%;

						}
					}
				}


			}
		}

	}
</style>
